<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="framework/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="framework/reset.css" rel="stylesheet">
	<link href="framework/icon.css" rel="stylesheet">
	<link href="css/index.css" rel="stylesheet">
	<script src="js/index.js"></script>
	<title>饿了么首页</title>
	<link rel="shortcut icon" href="img/elm_icon.ico">
</head>
<body>
	<!-- 总容器-->
	<div class="wrapper">
		<!--header顶部部分-->
		<header>
			<div class="icon-location-box">
				<div class="icon-location"></div>
			</div>
			<div class="location-text">天津大学北洋园校区<i class="fa fa-caret-down"></i></div>
		</header>

		<!--search部分-->
		<!-- 
			搜索框部分（此块与search-fixed-top块宽度高度一致，用于当
			search-fixed-top块固定后，挡住下面块不要窜上去）
		-->
		<div class="search">
			<!-- 
				搜索框部分（此块与search-fixed-top块宽度高度一致，用于当
				search-fixed-top块固定后，挡住下面块不要窜上去）
			-->
			<div class="search-fixed-top" id="fixedBox">
				<!--搜索框的中间部分的白框-->
				<div class="search-box">
					<i class="fa fa-search"></i>搜索饿了么商家，商品名称
				</div>
			</div>
		</div>

		<!--点餐分类部分-->
		<ul class="foodtype">
			<li onclick="location.href='businessList.html'">
				<img src="img/dcfl/dcfl01.jpg">
				<p>超市便利</p>
			</li>
			<li onclick="location.href='businessList.html'">
				<img src="img/dcfl/dcfl02.jpg">
				<p>汉堡西餐</p>
			</li>
			<li onclick="location.href='businessList.html'">
				<img src="img/dcfl/dcfl03.jpg">
				<p>咖啡烘培</p>
			</li>
			<li onclick="location.href='businessList.html'">
				<img src="img/dcfl/dcfl04.jpg">
				<p>买菜</p>
			</li>
			<li onclick="location.href='businessList.html'">
				<img src="img/dcfl/dcfl05.jpg">
				<p>买药</p>
			</li>
			<li onclick="location.href='businessList.html'">
				<img src="img/dcfl/dcfl06.jpg">
				<p>美食外卖</p>
			</li>
			<li onclick="location.href='businessList.html'">
				<img src="img/dcfl/dcfl07.jpg">
				<p>水果鲜果</p>
			</li>
			<li onclick="location.href='businessList.html'">
				<img src="img/dcfl/dcfl08.jpg">
				<p>甜品印品</p>
			</li>
			<li onclick="location.href='businessList.html'">
				<img src="img/dcfl/dcfl09.jpg">
				<p>炸卤小吃
			<li onclick="location.href='businessList.html'">
				<img src="img/dcfl/dcfl10.jpg">
				<p>粥粉面点</p>
			</li>
		</ul>

		<!--横幅广告部分-->
		<div class="banner">
			<h3>品质套餐</h3>
			<p>搭配齐全吃得好</p>
			<a>立即抢购 &gt;</a>
		</div>

		<!--超级会员部分-->
		<div class="supermember">
			<div class="left">
				<img src="img/super_member.png">
				<h3>超级会员</h3>
				<p>&#8226;每月享超值权益</p>
			</div>
			<div class="right">
				立即开通 &gt;
			</div>
		</div>

		<!-- 推荐商家部分 -->
		<div class="recommend">
			<div class="recommend-line"></div>
			<p>推荐商家</p>
			<div class="recommend-line"></div>
		</div>

		<!-- 推荐方式部分 -->
		<ul class="recommendtype">
			<li>综合排序<i class="fa fa-caret-down"></i></li>
			<li>距离最近</li>
			<li>销量最高</li>
			<li>筛选<i class="fa fa-filter"></i></li>
		</ul>

		<!--推荐商家列表-->
		<ul class="business">
			<li>
				<img src="img/sj01/cover.jpg">
				<div class="business-info">
					<div class="business-info-h">
						<h3>板烧厨房排骨饭(天南大店)</h3>
						<div class="business-info-like">&#8226</div>
					</div>
					<div class="business-info-star">
						<div class="business-info-star-left">
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<p>4.8 月售600+单</p>
						</div>
						<div class="business-info-star-right">
							蜂鸟专送
						</div>
					</div>
					<div class="business-info-delivery">
						<p>&#165;10起送 | &#165;2配送</p>
						<p>1.80km | 36分钟</p>
					</div>
					<div class="business-info-explain">
						<div>"排骨饭yyds！"</div>
					</div>
					<div class="business-info-promotion">
						<div class="business-info-promotion-left">
							<div class="business-info-promotion-left-incon">新</div>
							<p>饿了么新用户首单立减9元</p>
						</div>
						<div class="business-info-promotion-right">
							<p>2个活动</p>
							<i class="fa fa-caret-down"></i>
						</div>
					</div>
					<div class="business-info-promotion">
						<div class="business-info-promotion-left">
							<div class="business-info-promotion-left-incon" style="background-color: #F1884F;">
								特
							</div>
							<p>特价商品5元起</p>
						</div>
					</div>
				</div>
			</li>
			<li>
				<img src="img/sj02/cover.jpg">
				<div class="business-info">
					<div class="business-info-h">
						<h3>肯德基宅急送（天南大店）</h3>
						<div class="business-info-like">&#8226;</div>
					</div>
					<div class="business-info-star">
						<div class="business-info-star-left">
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<p>4.9 月售345单</p>
						</div>
						<div class="business-info-star-right">
							蜂鸟专送
						</div>
					</div>
					<div class="business-info-delivery">
						<p>&#165;0起送 | &#165;6配送</p>
						<p>3.22km | 30分钟</p>
					</div>
					<div class="business-info-explain">
						<div>"新店尝鲜"</div>
					</div>
					<div class="business-info-promotion">
						<div class="business-info-promotion-left">
							<div class="business-info-promotion-left-incon">新</div>
							<p>饿了么新用户首单立减9元</p>
						</div>
						<div class="business-info-promotion-right">
							<p>2个活动</p>
							<i class="fa fa-caret-down"></i>
						</div>
					</div>
					<div class="business-info-promotion">
						<div class="business-info-promotion-left">
							<div class="business-info-promotion-left-incon">特</div>
							<p>特价商品5元起</p>
						</div>
					</div>
				</div>
			</li>
			<li>
				<img src="img/sj03/cover.jpg">
				<div class="business-info">
					<div class="business-info-h">
						<h3>榕心厨房（天大校内店）</h3>
						<div class="business-info-like">&#8226;</div>
					</div>
					<div class="business-info-star">
						<div class="business-info-star-left">
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<p>5.0 月售900+单</p>
						</div>
						<div class="business-info-star-right">
							蜂鸟专送
						</div>
					</div>
					<div class="business-info-delivery">
						<p>&#165;15起送 | &#165;2配送</p>
						<p>3.22km | 30分钟</p>
					</div>
					<div class="business-info-explain">
						<div>"来了分黑椒鸡排意大利面，现在贼满足"</div>
					</div>
					<div class="business-info-promotion">
						<div class="business-info-promotion-left">
							<div class="business-info-promotion-left-incon">新</div>
							<p>饿了么新用户首单立减9元</p>
						</div>
						<div class="business-info-promotion-right">
							<p>2个活动</p>
							<i class="fa fa-caret-down"></i>
						</div>
					</div>
					<div class="business-info-promotion">
						<div class="business-info-promotion-left">
							<div class="business-info-promotion-left-incon">特</div>
							<p>特价商品5元起</p>
						</div>
					</div>
				</div>
			</li>
			<li>
				<img src="img/sj04/cover.jpg">
				<div class="business-info">
					<div class="business-info-h">
						<h3>泰诗兰</h3>
						<div class="business-info-like">&#8226;</div>
					</div>
					<div class="business-info-star">
						<div class="business-info-star-left">
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<p>4.6 月售400+单</p>
						</div>
						<div class="business-info-star-right">
							蜂鸟专送
						</div>
					</div>
					<div class="business-info-delivery">
						<p>&#165;0起送 | &#165;2配送</p>
						<p>3.22km | 60分钟</p>
					</div>
					<div class="business-info-explain">
						<div>"给宫保鸡丁炒饭一百昏！"</div>
					</div>
					<div class="business-info-promotion">
						<div class="business-info-promotion-left">
							<div class="business-info-promotion-left-incon">新</div>
							<p>饿了么新用户首单立减9元</p>
						</div>
						<div class="business-info-promotion-right">
							<p>2个活动</p>
							<i class="fa fa-caret-down"></i>
						</div>
					</div>
					<div class="business-info-promotion">
						<div class="business-info-promotion-left">
							<div class="business-info-promotion-left-incon">特</div>
							<p>特价商品5元起</p>
						</div>
					</div>
				</div>
			</li>
		</ul>

		<!--底部菜单部分-->
		<ul class="footer">
			<li onclick="location.href='index.html'">
				<i class="fa fa-home"></i>
				<p>首页</p>
			</li>
			<li>
				<i class="fa fa-compass"></i>
				<p>发现</p>
			</li>
			<li onclick="location.href='orderList.html'">
				<i class="fa fa-file-text-o"></i>
				<p>订单</p>
			</li>
		</ul>
	</div>
</body>
</html>